<!DOCTYPE html>
<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>品优购-正品低价、品质保障、配送及时、轻松购物！</title>
	<!-- 设置网页描述 -->
	<meta name="description" content="品优购-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!">

	<!-- 设置网页关键字 -->
	<meta name="keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东">

	<!-- 设置网页图标 -->
	<link rel="icon" href="favicon.ico">

	<!-- 引用外部样式文件 -->
	<link rel="stylesheet" type="text/css" href="css/base.css">
	<link rel="stylesheet" type="text/css" href="css/head.css">
	<link rel="stylesheet" type="text/css" href="css/footer.css">
	<link rel="stylesheet" type="text/css" href="css/index.css">

	<!-- 引用图标字体样式表 -->
	<link rel="stylesheet" type="text/css" href="css/iconfont/iconfont.css">


	<!-- <base target="_blank"> -->

	<style type="text/css">
		/* 标签被指向的时候隐藏 */
		.banner:target {
			display: none;
		}
	</style>
</head>

<body>

	<!-- 头部开始 -->
	<div class="header">

		<!-- 顶部广告开始 -->
		<div class="banner" id="hidden">
			<div class="w">
				<a href="#">
					<img src="uploads/top_header.jpg">
				</a>

				<!-- 关闭按钮 -->
				<a href="#hidden" class="close">X</a>
			</div>
		</div>

		<!-- 顶部导航 -->
		<div class="top_nav">

			<div class="w">

				<!-- 左侧文字 -->
				<div class="left l_text">
					品优购欢迎您!
					<a href="login.html">登录</a>
					<a href="register.html" style="color:red;">注册</a>
				</div>

				<!-- 右侧列表导航 -->
				<div class="right r_list">
					<ul>
						<li class="left"><a href="#">我的订单</a></li>
						<li class="line left"></li>
						<li class="left">
							<a href="#">我的订单</a>
							<i class="iconfont icon-xiangxiajiantou"></i>
						</li>
						<li class="line left"></li>
						<li class="left"><a href="#">我的订单</a></li>
						<li class="line left"></li>
						<li class="left"><a href="#">我的订单</a></li>
						<li class="line left"></li>
						<li class="left"><a href="#">我的订单</a></li>
						<li class="line left"></li>
						<li class="left">
							<a href="#">我的订单</a>
							<i class="iconfont icon-xiangxiajiantou"></i>
						</li>
						<li class="line left"></li>
						<li class="left">
							<a href="#">我的订单</a>
							<i class="iconfont icon-xiangxiajiantou"></i>
						</li>
						<li class="line left"></li>
						<li class="left">
							<a href="#">我的订单</a>
							<i class="iconfont icon-xiangxiajiantou"></i>

							<span class="code">
								<img src="code.png">
							</span>
						</li>
					</ul>
				</div>

			</div>
		</div>


		<!-- logo区域开始 -->
		<div class="m_logo w">

			<div class="l_logo left">
				<a href="#">
					<img src="img/logo.png">
				</a>
			</div>

			<!-- 搜索框 -->
			<div class="searchBox left">

				<div class="search">
					<input type="text" name="" class="search_box" placeholder="黑鲨手机">
					<input type="button" name="" class="btn">
					<i class="iconfont icon-sousuo"></i>
				</div>

				<ul>
					<li><a href="#">优惠券首发</a></li>
					<li><a href="#">优惠券首发</a></li>
					<li><a href="#">优惠券首发</a></li>
					<li><a href="#">优惠券首发</a></li>
					<li><a href="#">优惠券首发</a></li>
					<li><a href="#">优惠券首发</a></li>
					<li class="last_li"><a href="#">优惠券首发</a></li>
				</ul>
			</div>


			<div class="chart right">

				<i class="iconfont icon-gouwuche"></i>

				<a href="#">我的购物车 > </a>

				<span class="number">8</span>

			</div>
		</div>


		<!-- 导航区域开始 -->
		<div class="m_nav">

			<div class="w">


				<!-- 左侧全部商品分类 -->
				<div class="left products">

					<div class="titile">
						<h4>全部商品分类</h4>
					</div>

					<div class="P_content">
						<ul>
							<li>
								<a href="#">家用电器</a>
								<span>></span>
							</li>
							<li>
								<a href="#">家用电器</a>
								<span>></span>
							</li>
							<li>
								<a href="#">家用电器</a>
								<span>></span>
							</li>
							<li>
								<a href="#">家用电器</a>
								<span>></span>
							</li>
							<li>
								<a href="#">家用电器</a>
								<span>></span>
							</li>
							<li>
								<a href="#">家用电器</a>
								<span>></span>
							</li>
							<li>
								<a href="#">家用电器</a>
								<span>></span>
							</li>
							<li>
								<a href="#">家用电器</a>
								<span>></span>
							</li>
							<li>
								<a href="#">家用电器</a>
								<span>></span>
							</li>
							<li>
								<a href="#">家用电器</a>
								<span>></span>
							</li>

							<li>
								<a href="#">家用电器</a>
								<span>></span>
							</li>
							<li>
								<a href="#">家用电器</a>
								<span>></span>
							</li>
							<li>
								<a href="#">家用电器</a>
								<span>></span>
							</li>
							<li>
								<a href="#">家用电器</a>
								<span>></span>
							</li>
							<li>
								<a href="#">家用电器</a>
								<span>></span>
							</li>

						</ul>
					</div>
				</div>

				<!-- 导航列表 -->
				<div class="left nav_list">
					<ul>
						<li>
							<a href="#">服装城</a>
						</li>
						<li>
							<a href="#">服装城</a>
						</li>
						<li>
							<a href="#">服装城</a>
						</li>
						<li>
							<a href="#">服装城</a>
						</li>
						<li>
							<a href="#">服装城</a>
						</li>
						<li>
							<a href="#">服装城</a>
						</li>
						<li class="lastli">
							<a href="#">服装城</a>
						</li>
					</ul>
				</div>

			</div>

		</div>
	</div>





	<!-- 主体版心内容开始 -->
	<div class="w m_body">

		<!-- 第一部分：广告区域 -->
		<div class="m_banner">
			<!-- 轮播图 Start -->
			<div id="bannerCenter" class="banenr-center">
				<!-- 轮播项 -->
				<div class="content">
					<div class="item">
						<a href="#">
							<img src="uploads/banner1.png">
						</a>
					</div>
					<div class="item">
						<a href="#">
							<img src="uploads/banner2.jpg">
						</a>
					</div>
					<div class="item">
						<a href="#">
							<img src="uploads/banner3.jpg">
						</a>
					</div>
					<div class="item">
						<a href="#">
							<img src="uploads/banner4.jpg">
						</a>
					</div>
				</div>
				<!-- 左按钮 -->
				<a class="btn btn-left" href="javascript:">&lt;</a>
				<!-- 右按钮 -->
				<a class="btn btn-right" href="javascript:">&gt;</a>
				<!-- 一组小点按钮 -->
				<ul class="controls">
					<li class="active"></li>
					<li></li>
					<li></li>
					<li></li>
				</ul>
			</div>
			<!-- 轮播图 End -->


			<!-- 新闻列表部分 -->
			<div class="right news_list">
				<!-- 上新闻盒子 -->
				<div class="top_news">

					<div class="top_title_news">
						<h4>品优购快报</h4>
						<a href="#">更多</a>
					</div>

					<div class="news_contengt">
						<ul>
							<li><a href="#">[特惠]荣耀超级新品日</a></li>
							<li><a href="#">[特惠]荣耀超级新品日</a></li>
							<li><a href="#">[特惠]荣耀超级新品日</a></li>
							<li><a href="#">[特惠]荣耀超级新品日</a></li>
							<li><a href="#">[特惠]荣耀超级新品日</a></li>
						</ul>
					</div>
				</div>

				<!-- 服务列表 -->
				<div class="service_list">
					<ul>
						<li>
							<a href="#">
								<i class="Icon_bg"></i>
								话费
							</a>
						</li>
						<li><a href="#"><i class="Icon_bg"></i>话费</a></li>
						<li><a href="#"><i class="Icon_bg"></i>话费</a></li>
						<li><a href="#"><i class="Icon_bg"></i>话费</a></li>
						<li><a href="#"><i class="Icon_bg"></i>话费</a></li>
						<li><a href="#"><i class="Icon_bg"></i>话费</a></li>
						<li><a href="#"><i class="Icon_bg"></i>话费</a></li>
						<li><a href="#"><i class="Icon_bg"></i>话费</a></li>
						<li><a href="#"><i class="Icon_bg"></i>话费</a></li>
						<li><a href="#"><i class="Icon_bg"></i>话费</a></li>
						<li><a href="#"><i class="Icon_bg"></i>话费</a></li>
						<li><a href="#"><i class="Icon_bg"></i>话费</a></li>
					</ul>
				</div>

				<a href="#">
					<img src="uploads/ad.jpg">
				</a>
			</div>
		</div>


		<!-- 第二部分 推荐部分 recommend-->

		<div class="recommend">
			<ul>
				<li>
					今日推荐
				</li>
				<li>
					<a href="#" class="public">
						<img src="uploads/re-img1.jpg">
					</a>
				</li>
				<li>
					<a href="#" class="public">
						<img src="uploads/re-img1.jpg">
					</a>
				</li>
				<li>
					<a href="#" class="public">
						<img src="uploads/re-img1.jpg">
					</a>
				</li>
				<li>
					<a href="#" class="public">
						<img src="uploads/re-img1.jpg">
					</a>
				</li>
			</ul>
		</div>


		<!-- 第三部分 商品列表-->

		<div class="products_list">

			<!-- 顶部标题 -->
			<div class="top_list clearfix">
				<a href="#" class="left">
					家用电器
				</a>


				<ul class="right">
					<li><a href="#">大家电</a></li>
					<li class="line"></li>
					<li><a href="#">大家电</a></li>
					<li class="line"></li>
					<li><a href="#">大家电</a></li>
					<li class="line"></li>
					<li><a href="#">大家电</a></li>
					<li class="line"></li>
					<li><a href="#">大家电</a></li>
					<li class="line"></li>
					<li><a href="#">大家电</a></li>
					<li class="line"></li>
					<li><a href="#">大家电</a></li>
					<li class="line"></li>
					<li><a href="#">大家电</a></li>
					<li class="line"></li>
					<li><a href="#">大家电</a></li>
				</ul>
			</div>

			<!-- 商品列表 -->
			<div class="bot_list">

				<!-- 第一个盒子 -->
				<div class="left_div">
					<ul class="lists_item clearfix">
						<li>节能补贴</li>
						<li>节能补贴</li>
						<li>节能补贴</li>
						<li>节能补贴</li>
						<li>节能补贴</li>
						<li>节能补贴</li>
					</ul>

					<a href="#">
						<img src="uploads/floor-1-1.png">
					</a>
				</div>


				<div class="left2_div left">
					<a href="#">
						<img src="uploads/floor-1-b01.png">
					</a>
				</div>


				<div class="left3_div left">

					<a href="#">
						<img src="uploads/floor-1-2.png">
					</a>

					<a href="#">
						<img src="uploads/floor-1-3.png">
					</a>

				</div>


				<div class="left4_div left">
					<a href="#">
						<img src="uploads/floor-1-4.png">
					</a>
				</div>

				<div class="left5_div left">

					<a href="#">
						<img src="uploads/floor-1-6.png">
					</a>

					<a href="#">
						<img src="uploads/floor-1-6.png">
					</a>

				</div>

			</div>
		</div>



		<div class="products_list">

			<!-- 顶部标题 -->
			<div class="top_list clearfix">
				<a href="#" class="left">
					家用电器
				</a>


				<ul class="right">
					<li><a href="#">大家电</a></li>
					<li class="line"></li>
					<li><a href="#">大家电</a></li>
					<li class="line"></li>
					<li><a href="#">大家电</a></li>
					<li class="line"></li>
					<li><a href="#">大家电</a></li>
					<li class="line"></li>
					<li><a href="#">大家电</a></li>
					<li class="line"></li>
					<li><a href="#">大家电</a></li>
					<li class="line"></li>
					<li><a href="#">大家电</a></li>
					<li class="line"></li>
					<li><a href="#">大家电</a></li>
					<li class="line"></li>
					<li><a href="#">大家电</a></li>
				</ul>
			</div>

			<!-- 商品列表 -->
			<div class="bot_list">

				<!-- 第一个盒子 -->
				<div class="left_div">
					<ul class="lists_item clearfix">
						<li>节能补贴</li>
						<li>节能补贴</li>
						<li>节能补贴</li>
						<li>节能补贴</li>
						<li>节能补贴</li>
						<li>节能补贴</li>
					</ul>

					<a href="#">
						<img src="uploads/floor-1-1.png">
					</a>
				</div>


				<div class="left2_div left">
					<a href="#">
						<img src="uploads/floor-1-b01.png">
					</a>
				</div>


				<div class="left3_div left">

					<a href="#">
						<img src="uploads/floor-1-2.png">
					</a>

					<a href="#">
						<img src="uploads/floor-1-3.png">
					</a>

				</div>


				<div class="left4_div left">
					<a href="#">
						<img src="uploads/floor-1-4.png">
					</a>
				</div>

				<div class="left5_div left">

					<a href="#">
						<img src="uploads/floor-1-6.png">
					</a>

					<a href="#">
						<img src="uploads/floor-1-6.png">
					</a>

				</div>

			</div>
		</div>

	</div>

	<!-- 底部开始 -->
	<div class="footer">

		<!-- 底部上盒子：广告标语部分 -->
		<div class="top_footer w">
			<ul>
				<li class="ft_li">
					<span class="sg_bg"></span>

					<div class="text">
						<p>正品保障</p>
						<p class="sm_font">正品保障，开发票</p>
					</div>
				</li>
				<li>
					<span class="sg_bg"></span>

					<div class="text">
						<p>正品保障</p>
						<p class="sm_font">正品保障，开发票</p>
					</div>
				</li>
				<li>
					<span class="sg_bg"></span>

					<div class="text">
						<p>正品保障</p>
						<p class="sm_font">正品保障，开发票</p>
					</div>
				</li>
				<li>
					<span class="sg_bg"></span>

					<div class="text">
						<p>正品保障</p>
						<p class="sm_font">正品保障，开发票</p>
					</div>
				</li>
				<li>
					<span class="sg_bg"></span>

					<div class="text">
						<p>正品保障</p>
						<p class="sm_font">正品保障，开发票</p>
					</div>
				</li>
			</ul>
		</div>


		<!-- 中部列表盒子 -->
		<div class="middle_footer w">
			<dl class="fs_dl">
				<dt>购物指南</dt>
				<dd>购物流程</dd>
				<dd>购物流程</dd>
				<dd>购物流程</dd>
				<dd>购物流程</dd>
				<dd>购物流程</dd>
				<dd>购物流程</dd>
			</dl>
			<dl>
				<dt>购物指南</dt>
				<dd>购物流程</dd>
				<dd>购物流程</dd>
				<dd>购物流程</dd>
				<dd>购物流程</dd>
				<dd>购物流程</dd>
				<dd>购物流程</dd>
			</dl>
			<dl>
				<dt>购物指南</dt>
				<dd>购物流程</dd>
				<dd>购物流程</dd>
				<dd>购物流程</dd>
				<dd>购物流程</dd>
				<dd>购物流程</dd>
				<dd>购物流程</dd>
			</dl>
			<dl>
				<dt>购物指南</dt>
				<dd>购物流程</dd>
				<dd>购物流程</dd>
				<dd>购物流程</dd>
				<dd>购物流程</dd>
				<dd>购物流程</dd>
				<dd>购物流程</dd>
			</dl>
			<dl>
				<dt>购物指南</dt>
				<dd>购物流程</dd>
				<dd>购物流程</dd>
				<dd>购物流程</dd>
				<dd>购物流程</dd>
				<dd>购物流程</dd>
				<dd>购物流程</dd>
			</dl>
			<dl class="last_dl">
				<dt>购物指南</dt>
				<dd>
					<a href="#">
						<img src="img/wx_cz.jpg">
					</a>

					<p>
						购物指南
					</p>
				</dd>

			</dl>
		</div>


		<!-- 底部开始 -->
		<div class="bot_footer w">

			<p>
				<a href="#">关于我们</a><span>|</span>
				<a href="#">关于我们</a><span>|</span>
				<a href="#">关于我们</a><span>|</span>
				<a href="#">关于我们</a><span>|</span>
				<a href="#">关于我们</a><span>|</span>
				<a href="#">关于我们</a><span>|</span>
				<a href="#">关于我们</a>
			</p>


			<p>
				<a href="#">关于我们</a><span>|</span>
				<a href="#">关于我们</a><span>|</span>
				<a href="#">关于我们</a>

			</p>
		</div>
	</div>

	<!-- 回到顶部 -->
	<div class="toTop">
		<span>&gt;</span>
	</div>
	<!-- 引入动画 -->
	<script src="lib/dongHua.js"></script>
	<!-- 引入实现轮播的js程序 -->
	<script src="js/index.js"></script>
</body>

</html>